<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="10">
        <el-card class="box-card">
          <el-table
            ref="multipleTable"
            :data="todolist"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @row-click="onRowClick"
          >
            <el-table-column type="selection" width="55" />
            <!-- <el-table-column prop="type" label="报表类型" :formatter="formatterOfType" /> -->
            <el-table-column prop="name" label="报表名称" />
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <span :style="scope.row.status | statusBackgroundColor">{{ scope.row.status | formatterOfStatus }}</span>
              </template>
            </el-table-column>
            <el-table-column label="填报时间">
              <template slot-scope="scope">{{ scope.row.date | dateformat }}</template>
            </el-table-column>
          </el-table>

          <div class="foot-wrapper">
            <el-pagination
              small
              :total="total"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              :page-size="20"
              layout="total, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button class="header__left" size="mini" plain @click="onInvalid">作废</el-button>
            <el-button class="header__left" size="mini" plain @click="onSubmit">提交数据</el-button>
            <span class="header__right">当前时间: {{ now | dateformat }}</span>
          </div>
          <el-table :data="detailList" style="width: 100%">
            <el-table-column prop="standardCodeEn" label="标准名称" />
            <el-table-column prop="value" label="解析结果" />
            <el-table-column prop="valueStatus" label="状态" :formatter="formatterOfValueStatus" />
            <el-table-column prop="dataDate" label="数据时间" />
            <el-table-column prop="workarea" label="位置信息" :formatter="formatterOfWorkarea" />
            <el-table-column prop="deviceName" label="设备信息" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'

const colorFormStatus = (status) => {
  return ['yellow', 'cornflowerblue', 'darkgray'][status] || '#fff'
}

const backgroundColorFormStatus = (status) => {
  return {
    backgroundColor: colorFormStatus(status)
  }
}

export default {
  name: 'AuditPage',
  filters: {
    dateformat: (date) => moment(date).format('YYYY-MM-DD HH:mm:ss'),
    statusBackgroundColor: backgroundColorFormStatus,
    formatterOfStatus: (status) => ['待审核', '审核通过', '审核不通过'][status]
  },
  data() {
    return {
      now: new Date(),
      multipleSelection: [],
      currentPage: 1,
      current: 0
    }
  },
  computed: {
    ...mapState({
      todolist: state => state.audit.todolist,
      detailList: state => state.audit.detail && state.audit.detail.approve || [],
      total: state => state.audit.total
    })
  },
  created() {
    this.$store.dispatch('audit/fetchToDoList')
    this.intervalId = setInterval(() => {
      this.now = new Date()
    }, 60000)
  },
  destroyed() {
    clearInterval(this.intervalId)
  },
  methods: {
    formatterOfType(row, column, cellValue, index) {
      const ss = new Map([
        [0, '手工填报'], [1, '年报'], [2, '月报'], [3, '周报'], [4, '日报'], [5, '班报']
      ])
      return ss.get(cellValue) || cellValue || '--'
    },
    formatterOfValueStatus(row, column, cellValue, index) {
      const ss = new Map([
        [0, '正常'], [1, '可能不正常'], [2, '异常']
      ])
      return ss.get(cellValue) || cellValue || '--'
    },
    formatterOfWorkarea(row, column, cellValue, index) {
      return `${row.branch}/${row.workshop}/${row.workarea}`
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange() {
    },
    handleCurrentChange() {
    },
    onRowClick(row, column, event) {
      this.$store.dispatch('audit/fetchDetail', row.id)
      this.current = row.id
    },
    async remark() {
      try {
        const { value } = await this.$prompt('请输入备注', '提交数据', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputErrorMessage: '备注格式不正确'
        })
        return value
      } catch (error) {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      }
      return null
    },
    async onSubmit() {
      const remark = await this.remark()
      const excelId = this.current
      try {
        await this.$store.dispatch('audit/submit', { excelId, status: 1, remark })
        await this.$store.dispatch('audit/fetchToDoList')
      } catch (error) {
        console.error('提交时错误', error)
        this.$message({
          type: 'error',
          message: '提交失败'
        })
      }
    },
    async onInvalid() {
      const remark = await this.remark()
      const excelId = this.current
      try {
        await this.$store.dispatch('audit/submit', { excelId, status: 2, remark })
        await this.$store.dispatch('audit/fetchToDoList')
      } catch (error) {
        console.error('作废时错误', error)
        this.$message({
          type: 'error',
          message: '提交失败'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  &-container {
    margin: 16px;
    .box-card {
      .foot-wrapper {
        .el-pagination {
            float: right;
            margin-top: 10px;
        }
      }
      .header__item{
        display: inline-flex;
        width: 220px;
        margin-left: 16px;
        .label {
          width: 90px;
          font-size: 14px;
          line-height: 28px;
        }
      }
      .header__left {
        float: left;
      }
      .header__right {
        float: right;
        padding: 3px 0;
      }
      .header-divider {
        height: 1.2em;
      }
      .row-text {
        button {
          display: none;
        }
        &:hover {
          button {
            display: inline-block;
          }
        }
      }
      .card-footer {
        margin-top: 32px;
      }
    }
  }
}
</style>
